<template>
	<view class="index">
		<dd-tab :itemdata="['我收到的', '我赠送的']" :itemst="['0', '1']" :st="st" :isfixed="false" @changetab="changetab"
			class="dp-box"></dd-tab>
		<view class="list" v-if="datalist.length>0">
			<block v-if="st == 0">
				<view class="list-item" v-for="(item, index) in datalist" :key="index" @click="goDetail(item)">
					<view class="list-item-box">
						<view class="list-item-title">
							<view class="list-item-title-left">
								<image class="pic" :src="item.gift_for_mheadimg || '/static/img/my.png'"
									mode="aspectFill"></image>
								<text class="name">{{item.gift_for_mname || '匿名用户'}}</text>
								<text class="name-right">送给你</text>
							</view>
							<view class="list-item-title-right">
								{{item.createtime}}
							</view>
						</view>
						<view class="" v-for="(product, pIndex) in item.prolist" :key="pIndex">
							<view class="list-item-content">
								<view class="list-item-content-left">
									<image class="shop-pic" :src="product.pic" mode="aspectFill"></image>
								</view>
								<view class="list-item-content-right">
									<view class="list-item-content-title">
										{{product.name}}
									</view>
									<view class="list-item-content-text">
										{{product.ggname}} × {{product.num}}
									</view>
								</view>
							</view>
							<view class="list-item-btn">
								<!-- 联系客服按钮 -->
								<button class="btn service-btn" open-type="contact">
									联系客服
								</button>

								<!-- 送礼按钮 -->
								<button class="btn gift-btn" @click.stop="sendGift(product)">
									我也要送礼
								</button>

								<!-- 购买按钮 -->
								<button class="btn buy-btn" @click.stop="buyProduct(product)">
									我也要买一件
								</button>
							</view>
						</view>
					</view>

				</view>
			</block>
			<block v-else>
				<view class="list-item" v-for="(item, index) in datalist" :key="index">
					<view class="list-item-box">
						<view class="list-item-title">
							<view class="list-item-title-left" v-if="item.getgiftlist && item.getgiftlist.length > 0">
								<block v-for="(receiver, rIndex) in item.getgiftlist" :key="rIndex">
									<image class="pic" :src="receiver.get_gift_headimg" mode="aspectFill"></image>
									<text class="name">{{receiver.get_gift_nickname }}</text>
									<text class="name-right">领取了</text>
								</block>
							</view>
							<view class="list-item-title-left" v-else>
								<text class="name-right no-receiver">待领取</text>
							</view>
							<view class="list-item-title-right">
								{{item.createtime}}
							</view>
						</view>
						<view class="" v-for="(product, pIndex) in item.prolist" :key="pIndex"  @click="goDetail(item)">
							<view class="list-item-content">
								<view class="list-item-content-left">
									<image class="shop-pic" :src="product.pic" mode="aspectFill"></image>
								</view>
								<view class="list-item-content-right">
									<view class="list-item-content-title">
										{{product.name}}
									</view>
									<view class="list-item-content-text">
										{{product.ggname}} × {{product.num}}
									</view>
								</view>
							</view>
							<view class="list-item-btn">
								<!-- 联系客服按钮 -->
								<button class="btn service-btn" open-type="contact">
									联系客服
								</button>

								<!-- 送礼按钮 -->
								<button class="btn gift-btn" @click.stop="sendGift(product)">
									我也要送礼
								</button>

								<!-- 购买按钮 -->
								<button class="btn buy-btn" @click.stop="buyProduct(product)">
									我也要买一件
								</button>
							</view>
						</view>
					</view>

				</view>
			</block>
		</view>
		<nodata v-else></nodata>
		<button v-if="false && st == 1" class="select-gift-btn" @click="goToGiftShop"
			:style="{color:t('color2')}">去给好友挑选礼物</button>
		<nomore v-if="nomore"></nomore>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				st: 0,
				datalist: [],
				activeBtnIndex: 1,
				nodata: false,
				nomore: false,
				pagenum: 1,
			};
		},
		onLoad() {
			this.getdata();
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
		methods: {
			changetab: function(st) {
				this.st = st;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.getdata();
			},
			sendGift(item) {
				uni.navigateTo({
					// url: '/pagesZone/gift/index'
					url:'/pagesZone/gift/gift_zone?currentTab=0'
				});
			},
			buyProduct(item) {
				uni.navigateTo({
					url: `/pages/shop/product?id=${item.proid}`
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: `./gift_detail?id=${item.id}&type=${this.st}`
				})
			},
			handleBtnClick(index, item) {
				this.activeBtnIndex = index;
			},


			getdata(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				const that = this;
				const {
					pagenum,

				} = that;

				that.nodata = false;
				that.nomore = false;
				that.loading = true;
				const api = this.st == 0 ? 'MemberCenter/getreceivegift' : 'MemberCenter/getgivegift';
				app.get(api, {

					pagenum: pagenum,
					pagelimit: 10,

				}, function(res) {
					that.loading = false;
					const data = res.res;

					if (pagenum == 1) {


						that.datalist = data;

						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							const newdata = that.datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			},
			goToGiftShop() {
				uni.navigateTo({
					url: "/pagesZone/gift/index"
				});
			}
		}
	};
</script>

<style scoped>
	.no-data-container {
		padding-top: 100rpx;
		text-align: center;
	}

	.select-gift-btn {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.dp-box {
		margin-bottom: 20rpx;
	}

	.list-item {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.list-item-title {
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-item-title-left {
		display: flex;
		align-items: center;
	}

	.pic {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.name {
		margin: 0 10rpx;
	}

	.name-right {
		color: #888;
	}

	.list-item-title-right {
		color: #888;
		font-size: 24rpx;
	}

	.list-item-content {
		display: flex;
		margin-top: 10rpx;
	}

	.shop-pic {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.list-item-content-left {
		margin-right: 10rpx;
	}

	.list-item-content-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.list-item-content-text {
		font-size: 24rpx;
		color: #888;
		margin-top: 10rpx;
	}

	/* 基础按钮样式 */
	.list-item-btn {
		display: flex;
		justify-content: flex-end;
		border-top: 1rpx solid #f5f5f5;
		padding-top: 20rpx;
		margin-top: 20rpx;
	}

	/* 统一按钮样式 */
	.btn {
		padding: 0 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid;
		border-radius: 40rpx;
		font-size: 24rpx;
		margin: 0 10rpx;
		background: none;
		position: relative;
		box-sizing: border-box;
	}

	/* 移除button默认样式 */
	.btn::after {
		border: none;
	}
</style>